﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>SiteServer CMS 邮件发送插件</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="../../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../../assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../../assets/css/siteserver-1.0.7.min.css" rel="stylesheet" type="text/css" />
  <style>
    .nav .nav-link {
    font-weight: normal;
    border-radius: 1.25rem;
    font-size: 14px;
    }
    .editable, .editable a, .editable span {
      border-bottom: dashed 1px #0056b3 !important;
    }
  </style>
</head>

<body class="p-0">
  <div id="main" class="m-t-15 m-b-15 m-l-15 m-r-15">
    <template v-if="pageLoad">
      <div class="card-box" style="padding: 10px; margin-bottom: 10px">
        <ul class="nav nav-pills nav-justified">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;" @click="{btnNavClick('settings.html')}">邮件发送设置</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;" @click="{btnNavClick('test.html')}">发送邮件测试</a>
          </li>
        </ul>
      </div>

      <div v-if="pageAlert" class="alert" v-bind:class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }">
        <button v-on:click="pageAlert = null" class="close" data-dismiss="alert">×</button>
        <span v-html="pageAlert.html"></span>
      </div>

      <div class="card-box">

        <div class="form-group">
          <label>是否启用邮件发送功能</label>
          <select v-model="configInfo.isEnabled" class="form-control">
            <option :value="true">启用邮件发送</option>
            <option :value="false">禁用邮件发送</option>
          </select>
          <small class="form-text text-muted">选择禁用将导致无法发送邮件</small>
        </div>

        <template v-if="configInfo.isEnabled">

          <div class="form-group">
            <label>邮箱账户</label>
            <select v-model="configInfo.provider" class="form-control">
                <option value="aliyun">阿里云邮件推送</option>
              <option value="qq">QQ邮箱</option>
              <option value="qqEx">QQ企业邮箱</option>
              <option value="">其他</option>
            </select>
            <small class="form-text text-muted">请根据邮箱域名选择对应的邮箱账户</small>
          </div>

          <template v-if="!configInfo.provider">
            <div class="form-group">
              <label>
                SMTP服务器
                <small v-show="errors.has('host')" class="text-danger">{{ errors.first('host') }}</small>
              </label>
              <input type="text" v-model="configInfo.host" name="host"
                data-vv-as="SMTP服务器" v-validate="'required'" :class="{'is-invalid': errors.has('host') }" class="form-control">
            </div>
            <div class="form-group">
              <label>启用SSL</label>
              <select v-model="configInfo.isEnableSsl" class="form-control">
                <option :value="true">启用</option>
                <option :value="false">不启用</option>
              </select>
            </div>
            <div class="form-group">
              <label>
                SMTP端口
                <small v-show="errors.has('port')" class="text-danger">{{ errors.first('port') }}</small>
              </label>
              <input type="text" v-model="configInfo.port" name="port"
                data-vv-as="SMTP端口" v-validate="'required|numeric'" :class="{'is-invalid': errors.has('port') }" class="form-control">
            </div>
          </template>

          <template>
            <div class="form-group">
              <label>
                邮箱账号
                <small v-show="errors.has('address')" class="text-danger">{{ errors.first('address') }}</small>
              </label>
              <input type="text" v-model="configInfo.address" name="address"
                data-vv-as="邮箱账号" v-validate="'required|email'" :class="{'is-invalid': errors.has('address') }" class="form-control">
            </div>
            <div class="form-group">
              <label>
                邮箱密码
                <small v-show="errors.has('password')" class="text-danger">{{ errors.first('password') }}</small>
              </label>
              <input type="password" v-model="configInfo.password" name="password"
                data-vv-as="邮箱密码" v-validate="'required'" :class="{'is-invalid': errors.has('password') }" class="form-control">
              <small class="form-text text-muted">如果邮箱账户为QQ邮箱或QQ企业邮箱，请输入客户端专用密码（在设置/账户中生成）</small>
            </div>
            <div class="form-group">
              <label>
                发件人
                <small v-show="errors.has('displayName')" class="text-danger">{{ errors.first('displayName') }}</small>
              </label>
              <input type="text" v-model="configInfo.displayName" name="displayName"
                data-vv-as="发件人" v-validate="'required'" :class="{'is-invalid': errors.has('displayName') }" class="form-control">
              <small class="form-text text-muted">发件人通常为邮件发送方姓名或者单位名称</small>
            </div>
          </template>

        </template>

        <hr />

        <div class="text-center">
          <button class="btn btn-primary" v-on:click="btnSubmitClick">保 存</button>
        </div>

      </div>

    </template>
    <template v-else>
      <div class="text-center" style="margin-top: 100px">
        <img class="mt-3" src="../../assets/images/loading.gif" />
        <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
      </div>
    </template>
  </div>
</body>

</html>
<script src="../../assets/lib/es6-promise.auto.min.js"></script>
<script src="../../assets/lib/axios-0.18.0.min.js"></script>
<script src="../../assets/lib/jquery-1.9.1.min.js"></script>
<script src="../../assets/lib/layer/layer-3.1.1.js"></script>
<script src="../../assets/lib/vue-2.6.10.min.js" type="text/javascript"></script>

<script src="../../assets/lib/vee-validate/vee-validate-2.2.2.js" type="text/javascript"></script>
<script src="../../assets/lib/vee-validate/locale/zh_CN-2.2.2.js" type="text/javascript"></script>
<script src="../../assets/js/validate.js" type="text/javascript"></script>

<script src="../../assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="../../assets/js/swal2.js" type="text/javascript"></script>

<script src="../../assets/js/utils.js" type="text/javascript"></script>
<script src="settings.js" type="text/javascript"></script>
